<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./css/atten.css">
</head>
<body>
    <header>
        <nav id="cnav">
            <ul>
                <li>
                    <a href="#">
                        
                            <p>
                                关注
                            </p>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fangdajing "></use>
                        </svg>
                    </a>
                </li>
        
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lingdang"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="my">
        <div class="my_header">
            <a href="#">
                <img src="./img/微信图片_20230107000438.jpg" >
                <img src="./img/微信图片_20230107005352.jpg" >
                <img src="./img/微信图片_20230107005442.jpg" >
                <img src="./img/微信图片_20230107005445.jpg" >
            </a>
            
        </div>
        <div class="my-name">
            <span><a href="#">薛一靓</a></span>
            <span><a href="#">巧克力</a></span>
            <span><a href="#">山河而</a></span>
            <span><a href="#">后周周</a></span>
          
        </div>
    </div>
    <div class="xiabgfa">
        <p>今日话题~奇葩大赏</p>
        <li>
            <a href="#">
                <img src="./img/微信图片_20230107000438.jpg" >
            </a>
            <h3>快来发表你的想法</h3>
        </li>

    </div>
    <div class="tab">
        <div class="tt">
            <span class="cur">精选</span>
            <span>最新</span>
            <span>想法</span>
        </div>
        <div class="tc">
            <div class="ll">
                
                <a href="#">
                    <img src="./img/微信图片_20230107000438.jpg" >
                    <span>薛一靓</span>
                    
                </a>
           
                <p>怎么学习最好的？</p>
            </div>
            <div class="ll">
                
            <a href="#">
                <img src="./img/微信图片_20230107005357.jpg" >
                <span>薛一靓</span>
                
            </a>
       
            <p>怎么学习最好的？</p>
        </div>
        <div class="ll">
                
            <a href="#">
                <img src="./img/微信图片_20230107005401.jpg" >
                <span>薛一靓</span>
                
            </a>
       
            <p>怎么学习最好的？</p>
        </div>
        </div>
        <div class="tc"> <div class="ll">
                
            <a href="#">
                <img src="./img/微信图片_20230107005357.jpg" >
                <span>薛一靓</span>
                
            </a>
       
            <p>怎么学习最好的？</p>
        </div></div>
        <div class="tc"> <div class="ll">
                
            <a href="#">
                <img src="./img/微信图片_20230107005401.jpg" >
                <span>薛一靓</span>
                
            </a>
       
            <p>怎么学习最好的？</p>
        </div>
        <div class="ll">
                
            <a href="#">
                <img src="./img/微信图片_20230107005357.jpg" >
                <span>薛一靓</span>
                
            </a>
       
            <p>怎么学习最好的？</p>
        </div></div>
    </div>
    <script>
        var tab=document.getElementsByClassName("tab")[0];
        var tt=tab.querySelector(".tt");
        var span=tt.querySelectorAll("span");
        var tc=tab.getElementsByClassName("tc");
        console.log(tab,tt,span,tc);
        for(let i=0;i<span.length;i++){
            span[i].index=i;
            span[i].onmouseover=function(){
                for(let j=0;j<span.length;j++){
                    span[j].classList.remove("cur");
                    tc[j].style.display="none";
                }
                span[i].classList.add("cur");
                tc[i].style.display="block";
            }
        }
        //431薛一靓
    </script>

    <footer>
        <div id="bnav">
           
                <ul>
                    <li>
                        
                        <a href="./home page.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shouye2"></use>
                                </svg>
                            </div>
                            <p>首页</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./attention.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-guanzhu"></use>
                                </svg>
                            </div>
                            <p>关注</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-tianjia"></use>
                                </svg>
                            </div>
                           
                        </a>
                    </li>
                    <li>
                        
                        <a href="#">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-a-huiyuanVIP"></use>
                                </svg>
                            </div>
                            <p>会员</p>
                        </a>
                    </li>
                    <li>
                        
                        <a href="./my.html">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wode1"></use>
                                </svg>
                            </div>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
              
            </nav>
                </footer>
                
    
</body>
</html>